<template>
    <div>
        <div>
            <empty-data :show="show" class="re-empty"></empty-data>
        </div>
        <div >
            <img style="width: 100%" src="http://jysh.oss-cn-qingdao.aliyuncs.com/Eric/WechatIMG3086.png" alt="">
        </div>
        <div>
            <van-col span="24">
                <div v-for="(item,index) in (list)"  :key="index" class="up-case">
                    <div class="fz-leave">
                        <div class="fz"> 留言专家: {{item.experts_name}} </div>
                    </div>
                    <div class="fz-leave">
                        <span style="color: black">留言时间: {{(item.create_time) | formatDate}}</span>
                    </div>
                    <div  class="fz-leave">
                    <span>留言内容: <span class="neirongmsg">{{item.experts_leaving_message}}</span>
                    </span>
                    </div>
                    <div v-if="item.change">
                        <div v-if="item.list!==undefined">
                            <div  class="fz-leave" v-for="(item1,index1) in item.list" :key="index1">
                                <span>
                                    留言:<span class="neirongmsg">{{item1.add_message}}</span>
                                </span>
                            </div>
                        </div>
                    </div>
<!--                    <div class="fz-leave">-->
<!--                    <span  style="margin-left: 78%">-->
<!--                        <van-icon  size="25" name="arrow-down" @click="getaddmsg(item,index)" />-->
<!--                    </span>-->
<!--                    </div>-->
<!--                    <div class="textarea-border">-->
<!--                        <van-cell-group>-->
<!--                            <van-field-->
<!--                                    v-model="message"-->
<!--                                    type="textarea"-->
<!--                                    center-->
<!--                                    rows="1"-->
<!--                                    autosize-->
<!--                                    placeholder="请输入内容"-->
<!--                            >-->
<!--                                <van-button class="button"   size="small" slot="button" type="primary" @click="addmsg(item)">确定回复</van-button>-->
<!--                            </van-field>-->
<!--                        </van-cell-group>-->

<!--                    </div>-->
                </div>
            </van-col>
        </div>
    </div>
</template>
<script>
import { epidemicmessagereplyList, insertepidemicmessageadd, getuserepidemicmessageaddlist } from '@/api/mine'
import EmptyData from '@/components/empty-data/index'
export default {
  components: { EmptyData },
  data () {
    return {
      show: false,
      message: '',
      list: []

    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      epidemicmessagereplyList().then(ret => {
        if (ret.data.errcode === 0) {
          this.list = ret.data.data
          this.list.forEach(item => {
            this.$set(item, 'change', false)
          })
        }
      })
    },
    addmsg (obj) {
      console.log(obj)
      let data = {
        add_message_id: obj.id,
        add_message: this.message,
        experts_id: obj.experts_id
      }
      insertepidemicmessageadd(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.message = ''
          this.init()
        }
      })
    },
    getaddmsg (obj, index) {
      if (this.list[index].change) {
        this.list[index].change = false
      } else {
        let data = {
          add_message_id: obj.id
        }
        getuserepidemicmessageaddlist(data).then(ret => {
          if (ret.data.errcode === 0) {
            let x = ret.data.data
            this.list[index].list = x
            this.list[index].change = true
          }
        })
      }
    }
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + MM + '-' + d /* + ' ' +  h + ':' + m + ':' + s */
    }
  }
}
</script>
<style scoped>
    .neirongmsg{
        font-size: 12px;
    }
    .re-empty{
        top:60%;
    }
    .button{
        background-color: #99CC33;
        border: none;
        border-radius: 10%
    }
    .textarea-border >>> .van-field__control{
        width: 59%;
        /*border: 1px solid #eeeeee;*/
    }
    .textarea-border >>> .van-field__body{
        padding: 8px 0px;
    }
    .lower-img[data-v-195bf658]{
        margin-left: 13%;
        margin-top: 15%;
    }
    .lower-img {
        margin-left: 13%;
        margin-top: 15%;
    }

    .lower-img img {
        width: 85%;
    }

    .leave-button[data-v-195bf658] .van-button--small{
        font-size: 12px;
    }
    .fz-leave{
        font-size: 12px;
        border-top: 1px solid #F8F9FA;
        padding: 9px 0px 9px 15px;
    }
    .fz-leave span:nth-child(1){
        color: #969799;
    }
    .fz-leave span:nth-child(2){
        margin-left: 29%;
        color: #969799;
    }
    .up-case div[data-v-195bf658]:nth-of-type(5){
        margin-left: 0%;
        margin-top: 0%;
    }
    .fz-leave>>> .van-divider{
        margin: 0px;
    }
    .fz-leave>>> .leave-content[data-v-633c0b96]{
        padding: 0px;
    }
    .textarea-border >>> .van-cell{
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 0;
        overflow: hidden;
        color: #323233;
        font-size: 12px;
        line-height: 1.5rem;
        background-color: #fff;
    }
    .textarea-border >>> .van-collapse-item__content{
        padding: 0px;
        color: #969799;
        font-size: 12px;
        line-height: 1.5;
        background-color: #fff;
    }
    .textarea-border >>> .van-cell:not(:last-child)::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 0.9375rem;
        border-bottom:none;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
    }

    .leave-button >>> .van-button--small {
        padding: 0 1.5rem;
        font-size: 12px;
        line-height: 1.75rem;
        border-radius: 2em;
        background-color: #99CC33;
        color: white;
    }

    .leave-button {
        margin-top: 0.625rem;
        text-align: center;
        margin-bottom: 20px;
    }

    .leave-content {
        padding: 10px 0 5px 25px;
        font-size: 12px;
        line-height: 2em;

    }

    .up-case {
        -webkit-box-shadow: 0px 0px 11px 2px #f5f5f5;
        height: 100%;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        border: 1px solid #F6F6F6;
        border-radius: 0.5em;
    }

    .textarea-border >>> .van-field__control {
        font-size: 12px;
        margin-left: 1.8rem
    }
    .textarea-border >>> .van-cell__right-icon{
        margin-right: 44px;
    }
    .cell-content >>> .van-cell__title, .van-cell__value {
        margin-top: -7px;
        margin-bottom: -7px;
        margin-left: 11px;
        color: #7B808C;
    }

    .cell-content >>> .van-cell {
        font-size: 11px;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 0.625rem 0.9375rem;
        overflow: hidden;
        color: #323233;
        line-height: 1.5rem;
        background-color: #fff;
    }

    .cell-content >>> .van-cell__value {
        margin-right: 10px;
    }

    /*  .up-case div:nth-of-type(4) {
          color: #848583;
          font-size: 12px;
      }*/

    .lower-img {
        margin-left: 10%;
        margin-top: 15%;
    }

    .lower-img img {
        width: 85%;
    }

    .up-case div:nth-of-type(5) {
        /*margin-left: 70%;*/
        /*margin-top: -1.7rem;*/

        font-size: 12px;
        color: #646ABA;
    }

    .answer-hz div:nth-child(1) {
        margin-top: 1rem;
        margin-left: 8%;
        font-size: 14px;
    }

    .answer-hz div:nth-child(2) {
        margin-top: -1rem;
        margin-left: 60%;
        font-size: 12px;
    }

    .between-case div, .down-case div {
        padding: 1rem 1rem 0.7rem 1rem;
        font-size: 12px;
    }

    .between-case div:nth-child(2), .down-case div:nth-child(2) {
        margin-left: 70%;
        font-size: 12px;
        color: #646ABA;
    }

    .fz {
        font-size: 12px;
    }
</style>
